<template>
  <div id="components-layout">
    <div class="top-app">
      <!-- <img class="pic-logo" src="~@/assets/smms.png"> -->
    </div>
    <div class="center-app">
      <a-list
        :grid="{ gutter: 24, lg: 3, md: 3, sm: 2, xs: 1 }"
        :dataSource="providers">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card :hoverable="true">
            <a-card-meta class="meta-card">
              <div slot="title">{{ item.title }}</div>
              <a-avatar slot="avatar" :src="item.img" size="small"/>
              <div slot="description">
                {{ item.desc }}
              </div>
            </a-card-meta>
            <template class="ant-card-actions" slot="actions">
              <a @click="handleConfig(item.pid)">配置</a>
              <a @click="handleGuide(item.pid)">教程</a>
            </template>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
    <div class="edit-app">
      <smms-form
        ref="smmsModal"
        :visible="smmsVisible"
        :loading="smmsConfirmLoading"
        :model="smmsMdl"
        @cancel="handleSmmsCancel"
        @ok="handleSmmsOk"
      />
      <github-form
        ref="githubModal"
        :visible="githubVisible"
        :loading="githubConfirmLoading"
        :model="githubMdl"
        @cancel="handleGithubCancel"
        @ok="handleGithubOk"
      />
      <qiniu-form
        ref="qiniuModal"
        :visible="qiniuVisible"
        :loading="qiniuConfirmLoading"
        :model="qiniuMdl"
        @cancel="handleQiniuCancel"
        @ok="handleQiniuOk"
      />
      <aliyunoss-form
        ref="aliyunossModal"
        :visible="aliyunossVisible"
        :loading="aliyunossConfirmLoading"
        :model="aliyunossMdl"
        @cancel="handleAliyunossCancel"
        @ok="handleAliyunossOk"
      />
      <txcos-form
        ref="txcosModal"
        :visible="txcosVisible"
        :loading="txcosConfirmLoading"
        :model="txcosMdl"
        @cancel="handleTxcosCancel"
        @ok="handleTxcosOk"
      />
      <upyun-form
        ref="upyunModal"
        :visible="upyunVisible"
        :loading="upyunConfirmLoading"
        :model="upyunMdl"
        @cancel="handleUpyunCancel"
        @ok="handleUpyunOk"
      />
    </div>   
  </div>
</template>
<script>
import COMMON from '@/store/common'
import SmmsForm from './modules/Smms'
import GithubForm from './modules/Github'
import QiniuForm from './modules/Qiniu'
import AliyunossForm from './modules/Aliyunoss'
import TxcosForm from './modules/Txcos'
import UpyunForm from './modules/Upyun'
import { localApi } from '@/api/main'

export default {
  name: 'Setting',
  components: {
    SmmsForm,
    GithubForm,
    QiniuForm,
    AliyunossForm,
    TxcosForm,
    UpyunForm
  },
  data() {
    return {
      providers: COMMON.providers,
      guide: COMMON.guide,
      smmsMdl: {},
      smmsVisible: false,
      smmsConfirmLoading: false,
      githubMdl: {},
      githubVisible: false,
      githubConfirmLoading: false,
      qiniuMdl: {},
      qiniuVisible: false,
      qiniuConfirmLoading: false,
      aliyunossMdl: {},
      aliyunossVisible: false,
      aliyunossConfirmLoading: false,
      txcosMdl: {},
      txcosVisible: false,
      txcosConfirmLoading: false,
      upyunMdl: {},
      upyunVisible: false,
      upyunConfirmLoading: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init () {
    },
    handleConfig(pid) {
      switch (pid) {
        case COMMON.smms :
          this.handleConfigSmmsEdit();
          break;
        case COMMON.github :
          this.handleConfigGithubEdit();
          break;
        case COMMON.aliyunoss :
          this.handleConfigAliyunossEdit();
          break;    
        case COMMON.txcos :
          this.handleConfigTxcosEdit();
          break;    
        case COMMON.qiniu :
          this.handleConfigQiniuEdit();
          break;
        case COMMON.upyun :
          this.handleConfigUpyunEdit();
          break;
      }
    },
    // smms
    handleConfigSmmsEdit() {
      localApi('getConfig', {pid: COMMON.smms}).then(res => {
        if (!res.data) {
          return false
        }
        this.smmsMdl = res.data;
      }).catch(err => {
        console.log('err:', err)
      }).finally(() => {
        this.smmsVisible = true;
      })
    },
    handleSmmsCancel () {
      this.smmsVisible = false;
    },
    handleSmmsOk () {
      const form = this.$refs.smmsModal.form;
      form.validateFields((errors, values) => {
        const alertMessageFail = '网络异常'
        if (!errors) {
          const params = {
            pid: values.pid,
            secret_token: values.secret_token,
          }
          localApi('setConfig', params).then(res => {
            if (res.code !== 0) {
              this.$message.info(alertMessageFail + '[' + res.code + ']')
              return false
            }
            //this.$message.info(alertMessageFail + '[' + res.code + ']')
          }).catch(err => {
            console.log('err:', err)
          }).finally(() => {
            // this.smmsVisible = false
          })
        }
        this.smmsVisible = false
      })
    },
    // github
    handleConfigGithubEdit() {
      localApi('getConfig', {pid: COMMON.github}).then(res => {
        if (!res.data) {
          return false
        }
        this.githubMdl = res.data;
      }).catch(err => {
        console.log('err:', err)
      }).finally(() => {
        this.githubVisible = true;
      })
    },
    handleGithubCancel () {
      this.githubVisible = false;
    },
    handleGithubOk () {
      const form = this.$refs.githubModal.form;
      form.validateFields((errors, values) => {
        const alertMessageFail = '网络异常'
        if (!errors) {
          // console.log('form values:', values);
          const params = values;
          localApi('setConfig', params).then(res => {
            if (res.code !== 0) {
              this.$message.info(alertMessageFail + '[' + res.code + ']')
              return false
            }
          }).catch(err => {
            console.log('err:', err)
          }).finally(() => {
          })
        }
        this.githubVisible = false
      })
    },
    // Qiniu
    handleConfigQiniuEdit() {
      localApi('getConfig', {pid: COMMON.qiniu}).then(res => {
        if (!res.data) {
          return false
        }
        this.qiniuMdl = res.data;
      }).catch(err => {
        console.log('err:', err)
      }).finally(() => {
        this.qiniuVisible = true;
      })
    },
    handleQiniuCancel () {
      this.qiniuVisible = false;
    },
    handleQiniuOk () {
      const form = this.$refs.qiniuModal.form;
      form.validateFields((errors, values) => {
        const alertMessageFail = '网络异常'
        if (!errors) {
          // console.log('form values:', values);
          const params = values;
          localApi('setConfig', params).then(res => {
            if (res.code !== 0) {
              this.$message.info(alertMessageFail + '[' + res.code + ']')
              return false
            }
          }).catch(err => {
            console.log('err:', err)
          }).finally(() => {
          })
        }
        this.qiniuVisible = false
      })
    },  
    // Aliyunoss
    handleConfigAliyunossEdit() {
      localApi('getConfig', {pid: COMMON.aliyunoss}).then(res => {
        if (!res.data) {
          return false
        }
        this.aliyunossMdl = res.data;
      }).catch(err => {
        console.log('err:', err)
      }).finally(() => {
        this.aliyunossVisible = true;
      })
    },
    handleAliyunossCancel () {
      this.aliyunossVisible = false;
    },
    handleAliyunossOk () {
      const form = this.$refs.aliyunossModal.form;
      form.validateFields((errors, values) => {
        const alertMessageFail = '网络异常'
        if (!errors) {
          // console.log('form values:', values);
          const params = values;
          localApi('setConfig', params).then(res => {
            if (res.code !== 0) {
              this.$message.info(alertMessageFail + '[' + res.code + ']')
              return false
            }
          }).catch(err => {
            console.log('err:', err)
          }).finally(() => {
          })
        }
        this.aliyunossVisible = false
      })
    }, 
    // Txcos
    handleConfigTxcosEdit() {
      localApi('getConfig', {pid: COMMON.txcos}).then(res => {
        if (!res.data) {
          return false
        }
        this.txcosMdl = res.data;
      }).catch(err => {
        console.log('err:', err)
      }).finally(() => {
        this.txcosVisible = true;
      })
    },
    handleTxcosCancel () {
      this.txcosVisible = false;
    },
    handleTxcosOk () {
      const form = this.$refs.txcosModal.form;
      form.validateFields((errors, values) => {
        const alertMessageFail = '网络异常'
        if (!errors) {
          // console.log('form values:', values);
          const params = values;
          localApi('setConfig', params).then(res => {
            if (res.code !== 0) {
              this.$message.info(alertMessageFail + '[' + res.code + ']')
              return false
            }
          }).catch(err => {
            console.log('err:', err)
          }).finally(() => {
          })
        }
        this.txcosVisible = false
      })
    },       
    // Upyun
    handleConfigUpyunEdit() {
      localApi('getConfig', {pid: COMMON.upyun}).then(res => {
        if (!res.data) {
          return false
        }
        this.upyunMdl = res.data;
      }).catch(err => {
        console.log('err:', err)
      }).finally(() => {
        this.upyunVisible = true;
      })
    },
    handleUpyunCancel () {
      this.upyunVisible = false;
    },
    handleUpyunOk () {
      const form = this.$refs.upyunModal.form;
      form.validateFields((errors, values) => {
        const alertMessageFail = '网络异常'
        if (!errors) {
          // console.log('form values:', values);
          const params = values;
          localApi('setConfig', params).then(res => {
            if (res.code !== 0) {
              this.$message.info(alertMessageFail + '[' + res.code + ']')
              return false
            }
          }).catch(err => {
            console.log('err:', err)
          }).finally(() => {
          })
        }
        this.upyunVisible = false
      })
    },   
    handleGuide (pid) {
      const guideInfo = this.guide[pid];
      window.open(guideInfo.configUrl, '_blank')
    },          
  },
};
</script>
<style lang="less" scoped>
#components-layout {
  .top-app {
    border: 0px solid #000;
  }
  .center-app {
    padding: 10px;
  }
  .app-card {
    //width: 30%;
  }
  .edit-app {

  }
  .meta-card {
    text-align: left
  }
}

</style>
